<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>五笔助手</title>
    <link rel="stylesheet" href="../../assets/scss/wubi.css">
    <link rel="stylesheet" href="../../node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.css">
</head>
<body>

<div v-cloak id="app">
    <!--词条编辑窗口-->
    <div class="edit-modal modal" v-if="wordEditing">
        <div class="modal-panel">
            <div class="modal-header">
                <div class="id">{{wordEditing.id}}</div>
            </div>
            <div class="modal-body">
                <input ref="editInputWord" class="mb-1" type="text" v-model="wordEditing.word" >
                <input ref="editInputCode" type="text" v-model="wordEditing.code" >
            </div>
            <div class="modal-footer">
                <div class="btn btn-cyan mr-2" @click="generateCodeForWordEdit">生成编码</div>
                <div class="btn btn-roseo" @click="confirmEditWord">确定</div>
            </div>
        </div>
    </div>
    <!--搜索框-->
    <div class="search-bar" v-if="dict">
        <div
            :class="[
                'btn',
                {'btn-green': labelOfSaveBtn === '保存成功'},
                {'btn-primary': labelOfSaveBtn !== '保存成功'} ]"
            ref="domBtnSave"
            @click="saveToFile(dict)">{{ labelOfSaveBtn }}
        </div>
        <div class="dropdown">
            <div class="dropdown-link btn btn-blue"
                 v-show="chosenWordIdArray.length > 0"
                 @click.capture="showDropdown = !showDropdown">移动到...            </div>
            <div class="dropdown-body" v-show="showDropdown">
                <div class="file-list shadow" v-if="dropdownFileList.length > 0">
                    <div :class="['file-list-item', {active: fileIndex === dropdownActiveFileIndex}]"
                         @click="setDropdownActiveIndex(fileIndex)"
                         v-for="(file, fileIndex) in dropdownFileList"
                         :key="fileIndex">
                        <div>{{ file.name }}</div>
                    </div>
                </div>
                <div class="file-list shadow" v-if="targetDict.isGroupMode">
                    <div :class="['file-list-item', {active: index === dropdownActiveGroupIndex}]"
                         v-if="targetDict.isGroupMode"
                         @click="setDropdownActiveGroupIndex(index)"
                         v-for="(group, index) in targetDict.wordsOrigin"
                         :key="index">
                        <div>{{ group.groupName }}</div>
                    </div>
                </div>
                <div class="btn btn-blue shadow ml-1"
                     @click="moveWordsToTargetDict"
                     v-if="targetDict.isGroupMode && dropdownActiveGroupIndex !== -1 || !targetDict.isGroupMode && dropdownActiveFileIndex !== -1"
                >确定</div>
            </div>
        </div>
        <div class="input-item">
            <input class="word" ref="domInputWord" @keyup.enter="enterKeyPressed" v-model="word" type="text" placeholder="词条">
            <div @click="word = ''" v-show="word" class="btn-clear">
                <img src="../../assets/img/delete_white.svg" alt="clear">
            </div>
        </div>
        <div class="input-item">
            <input class="code" ref="domInputCode" @keyup.enter="enterKeyPressed" v-model="code" type="text" placeholder="编码">
            <div @click="code = ''" v-show="code" class="btn-clear">
                <img src="../../assets/img/delete_white.svg" alt="clear">
            </div>
        </div>
        <div class="btn btn-primary" @click="addNewWord">添加</div>
        <div class="btn btn-primary" @click="search">搜索</div>
        <div class="btn btn-roseo" v-show="chosenWordIdArray.length > 0" @click="deleteWords">删除</div>
        <p class="notice">显示格式：<b>编码</b> - 词条 - 序号 - id</p>

        <template v-if="IS_IN_DEVELOP">

        </template>
    </div>

    <div class="app-container">
        <!--文件目录列表-->
        <div class="schema-list" :style="`height: ${heightContent}px`">
            <div @click="switchToFile(file)"
                 :class="['schema-list-item',  {active: dict.fileName === file.path}]"
                 v-for="file in dropdownFileList" :key="file.path">{{file.name}}</div>
        </div>
        <!-- 普通模式列表 -->
        <div ref="container"
             v-if="!dict.isGroupMode"
             :style="`height: ${heightContent}px`"
             class="content">
            <div class="list-container">
                <div class="group">
                    <recycle-scroller
                        :buffer="1000"
                        :prerender="200"
                        :style="`height: ${heightContent}px`"
                        v-if="words.length > 0"
                        :min-item-size="24"
                        class="virtual-list"
                        :items="words">
                        <template v-slot="{ item, index }">
                            <div class="word-item" @click="select(index, item.id, $event)">
                                <div class="checkbox-cell">
                                    <!--                                <div :class="['checkbox-item', {active: chosenWordIdArray.some(i => i === item.id)}]"></div>-->
                                    <div :class="['checkbox-item', {active: chosenWordIds.has(item.id)}]"></div>
                                </div>
                                <div class="code">{{ item.code }}</div>
                                <div class="word">{{ item.word }}</div>
                                <div v-if="item.priority" title="权重" class="priority">{{ item.priority }}</div>
                                <div class="id">{{ index }}</div>
                                <div class="id">{{ item.id }}</div>
                                <div class="operation">
                                    <div class="up" @click.stop="moveUp(item.id)"><img src="../../assets/img/up.svg" alt="move up"></div>
                                    <div class="down" @click.stop="moveDown(item.id)"><img src="../../assets/img/down.svg" alt="move down"></div>
                                    <div class="up" @click.stop="editWord(item)"><img src="../../assets/img/edit.svg" alt="edit"></div>
                                    <div  class="down" @click.stop="deleteWord(item.id)"><img src="../../assets/img/delete.svg" alt="delete"></div>
                                </div>
                            </div>
                        </template>
                    </recycle-scroller>
                </div>
            </div>
        </div>

        <!-- 分组模式列表 -->
        <div v-else
             :style="`height: ${heightContent}px`"
             class="content">
            <div class="group-container"
                 :style="`height: ${heightContent}px`">
                <!--分组目录-->
                <div class="catalog-list"
                     :style="`height: ${heightContent}px`">
                    <div :class="['catalog-item', {active: -1 === activeGroupId}]"
                         @click="setGroupId(-1)"><div>全部</div></div>
                    <div :class="['catalog-item', {active: groupIndex === activeGroupId}]"
                         @click="setGroupId(groupIndex)"
                         v-for="(group, groupIndex) in dict.wordsOrigin"
                         :key="groupIndex">
                        <div>{{group.groupName || '- 未命名 -'}}</div>
                    </div>
                </div>
                <!-- 分组词条组列表-->
                <div class="group-list"
                     :style="`height: ${heightContent}px`">
                    <div class="group" v-for="(group, groupIndex) in words" :key="groupIndex">
                        <!--- GROUP HEADER -->
                        <div class="group-header"
                             @click.right="group.isEditingTitle = !group.isEditingTitle">
                            <template v-if="group.isEditingTitle">
                                <input :key="groupIndex"
                                       v-model="group.groupName"
                                       @keydown.enter="group.isEditingTitle = false" />
                                <div class="operation">
                                    <div class="btn btn-sm btn-alt-primary" @click="group.isEditingTitle = false">保存</div>
                                </div>
                            </template>
                            <template v-else>
                                <h3 :key="groupIndex"
                                >{{ group.groupName }}</h3>
                                <div class="operation" >
                                    <div class="btn btn-sm btn-alt-primary" @click="group.isEditingTitle = true">编辑</div>
                                    <div v-if="activeGroupId === -1" class="btn btn-sm btn-alt-primary" @click="addGroupBeforeId(groupIndex)">添加分组</div>
                                    <div class="btn btn-sm btn-alt-roseo" @click="deleteGroup(group.id)">删除</div>
                                </div>
                            </template>
                            <!--                        <p class="tip" v-if="activeGroupId === groupIndex">+  新词将添加到该分组</p>-->
                        </div>

                        <div class="word-list">
                            <div class="word-item"
                                 @click="select(index, item.id, $event)"
                                 v-for="(item, index) in group.dict"
                                 :key="item.id">
                                <div class="checkbox-cell">
                                    <!--                                <div :class="['checkbox-item', {active: chosenWordIdArray.some(i => i === item.id)}]"></div>-->
                                    <div :class="['checkbox-item', {active: chosenWordIds.has(item.id)}]"></div>
                                </div>
                                <div class="code">{{ item.code }}</div>
                                <div class="word">{{ item.word }}</div>
                                <div v-if="item.priority" title="权重" class="priority">{{ item.priority }}</div>
                                <div class="id">{{ index }}</div>
                                <div class="id">{{ item.id }}</div>
                                <div class="operation">
                                    <div class="up" @click.stop="moveUp(item.id)"><img src="../../assets/img/up.svg" alt="move up"></div>
                                    <div  class="down" @click.stop="moveDown(item.id)"><img src="../../assets/img/down.svg" alt="move down"></div>
                                    <div class="up" @click.stop="editWord(item)"><img src="../../assets/img/edit.svg" alt="edit"></div>
                                    <div  class="down" @click.stop="deleteWord(item.id)"><img src="../../assets/img/delete.svg" alt="delete"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>



    <!--FOOTER-->
    <div class="footer">
        <div class="footer-toolbar">
            <div class="link-list">
                <div class="link" ref="domBtnSelectAll" @click="selectAll">全选</div>
                <div class="link" @click="resetInputs">清选</div>
                <div class="link" @click="reloadCurrentDict">重载码表</div>
                <div class="link" @click="sort">排序</div>
                <div class="link origin" @click="openCurrentYaml">{{ dict.fileName }}</div>
            </div>
            <div class="info-list">
                <div class="count">总<span class="number">{{dict.countDictOrigin}}</span></div>
                <div class="count"
                     v-if="dict.countDictOrigin !== dict.countDict">显<span class="number">{{wordsCount}}</span></div>
                <div class="count">选<span class="number">{{chosenWordIds.size}}</span></div>
            </div>
        </div>

        <div class="tip">{{tip}}</div>
    </div>
</div>

<script src="App.js"></script>
</body>
</html>
